<template>
	<div class="w-full">
		<div class="flex items-center absolute top-0 left-0 text-14px cursor-pointer" @click="back">
			<el-icon>
				<ArrowLeft />
			</el-icon>
			<p>
				返回
			</p>
		</div>
		<div class="w-full flex items-center justify-center">
			<div class="w-40%">
				<p class="text-34px text-[#000] font-bold">证件验证</p>
				<p class="text-18px text-[#000] mt-20px">系统将扫描您的证件，提取个人信息</p>
				<div
					class="mt-30px border-1px border-solid border-#E5E6EB rounded-8px flex items-center justify-between h-90px box-border pr-20px pl-20px">
					<div class="flex items-center">
						<img src="/person/computer.svg" class="w-20px h-20px">
						<p class="ml-10px text-18px text-#000000">当前设备上传</p>
					</div>
					<el-icon size="10px">
						<ArrowRight />
					</el-icon>
				</div>
				<div>
					<el-collapse accordion>
						<el-collapse-item name="1">
							<template #title>
								<div class="flex items-center">
									<img src="/person/phone.svg" class="w-20px h-20px">
									<p class="ml-10px text-18px text-#000000">手机验证</p>
								</div>
							</template>
							<div class="flex flex-col items-center">
								<p class="text-14px text-#86909C">
									请使用相机扫码连接至手机（如扫码后手机页面显示空白，请
									<span class="text-#114CEE">刷新二维码</span>
									并重新扫描）
								</p>
								<img src="/person/wechat-code.svg" class="w-140px h-140px mt-20px">
							</div>
						</el-collapse-item>
					</el-collapse>
					<el-collapse accordion>
						<el-collapse-item name="1">
							<template #title>
								<div class="flex items-center">
									<img src="/person/phone.svg" class="w-20px h-20px">
									<p class="ml-10px text-18px text-#000000">通过欧神APP验证</p>
								</div>
							</template>
							<div class="flex flex-col ">
								<p class="text-14px text-#86909C ml-50px mr-50px">
									请使用手机相机扫码安装并登陆欧神App继续验证(如扫码后手机页面显示空白，请
									<span class="text-#114CEE">刷新二维码</span>
									并重新扫描)
								</p>
								<p class="text-14px text-#86909C ml-50px mt-20px">
									若已安装欧神ApP，请使用App扫码继续验证
								</p>
								<div class="w-full flex items-center justify-center mt-20px">
									<img src="/person/wechat-code.svg" class="w-140px h-140px ">
								</div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</div>
				<div class="mt-60px">
					<el-button color="#114CEE" style="width: 100%;height:50px;font-size: 18px;" @click="next">继续</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const emits = defineEmits(['back', 'next'])

const next = () => {
	emits('next')
}

const back = () => {
	emits('back')
}
</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
	border: 1px solid #E5E6EB;
	border-radius: 8px;
	margin-top: 20px;
	min-height: 90px;
}

::v-deep .el-collapse-item__header {
	border: none;
	padding: 0 20px 0 20px;
	border-radius: 10px;
	min-height: 90px;
	box-sizing: border-box;
	font-weight: 300;
}

::v-deep .el-collapse-item.is-active .el-collapse-item__wrap {
	border-radius: 8px;
}
</style>
